<!doctype html>
<html>
	<body>
        <h2>The solar system from Deng Haijun 2013/01/07</h2>
		<canvas id="canvas" width="2000" height="2000" style="background:black"></canvas>
		<script>
			//Get canvas
			var canvas = document.getElementById("canvas");
			//Set 2d draw Env
			var ctx = canvas.getContext("2d");
			
			//draw the tracks for planets
			function drawTrack(){
				//for(var i=0;i<8;i++){
                
					ctx.beginPath();
					ctx.arc(1000,1000,50,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,70,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
					ctx.beginPath();
					ctx.arc(1000,1000,90,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,130,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,200,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,330,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,500,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
                    
                    ctx.beginPath();
					ctx.arc(1000,1000,900,0,360,false);
					ctx.closePath();
					//Set the color of the tracks
					ctx.strokeStyle = '#fff';
					ctx.stroke();
				//}
			}
			drawTrack();
			
			//draw plants
			function Star(x,y,radius,cycle,sColor,eColor){
				
				//cords
				this.x = x;
				this.y = y;
				
				//radius
				this.radius = radius;
				
				//cycle time
				this.cycle = cycle;
				
				//the color from center to outer
				this.sColor = sColor;
				this.eColor = eColor;
				
				//???????????
				this.color = null;
				
				//timer
				this.time = 0;
				
				this.draw = function(){
					//save the orig
					ctx.save();
					
					//reset 0,0 cord
					ctx.translate(1000,1000);
					
					//??????
					ctx.rotate(this.time*(360/this.cycle)*(Math.PI/180));
					
					//draw a circle for planet
					ctx.beginPath();
					ctx.arc(this.x,this.y,this.radius,0,360,false);
					ctx.closePath();
					
					//color grading radius
					this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
					
					//Set plannet color grading
					this.color.addColorStop(0,this.sColor);
					this.color.addColorStop(1,this.eColor);
					
					//????
					ctx.fillStyle = this.color;
					ctx.fill();
					
					//restore the context
					ctx.restore();
					
					//?????;
					this.time+=1;
				}
			}
			
			//new Sun
			function Sun(){
				Star.call(this,0,0,30,0,"#f00","#f90");
			}
			
			//new Mercury
			function Mercury(){
				Star.call(this,0,-50,3,87.70,"#A69697","#5C3E40");
			}
			
			//new Venus
			function Venus(){
				Star.call(this,0,-70,5,224.701,"#C4BBAC","#1f1315");
			}
			
			//new Earth
			function Earth(){
				Star.call(this,0,-90,5,365.224,"#78B1E8","#050C12");
			}
			
			//new Mars
			function Mars(){
				Star.call(this,0,-130,4,686.98,"#CEC9B6","#76422D");
			}
			
			//new Jupiter
			function Jupiter(){
				Star.call(this,0,-200,10,4332.589,"#C0A48E","#322222");
			}
			
			//new saturn
			function Saturn(){
				Star.call(this,0,-330,10,10759.5,"#F7F9E3","#5C4533");
			}
			
			//new Uranus
			function Uranus(){
				Star.call(this,0,-500,5,30799.095,"#A7E1E5","#19243A");
			}
			
			//new Neptune
			function Neptune(){
				Star.call(this,0,-900,5,60152,"#0661B2","#1E3B73");
			}
			
			
			var sun = new Sun();
			
			var mercury = new Mercury();
			
			var venus = new Venus();
			
			var earth = new Earth();

			var mars = new Mars();
			
			var jupiter = new Jupiter();
			
			var saturn = new Saturn();
			
			var uranus = new Uranus();
			
			var neptune = new Neptune();

			
			function move(){
				
				ctx.clearRect(0,0,2000,2000);
				drawTrack();
				//Now traw sun and all planet
				sun.draw();
				mercury.draw();
				venus.draw();
				earth.draw();
				mars.draw();
				jupiter.draw();
				saturn.draw();
				uranus.draw();
				neptune.draw();
			}
			
			setInterval(move,15);
			
		</script>
	</body>
</html>